import React from 'react';
import * as RecordsAPI from '../utils/RecordsAPI';

export default class RecordForm extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			date   : "",
			title  : "",
			amount : ""
		}
	}

	handleChange(event) {
		let name,obj;
		name = event.target.name;
		this.setState((
			obj = {},
			obj["" + name] = event.target.value,
			obj
		))
	}
	
	valid() {
		return this.state.date && this.state.title && this.state.amount
	}

	handleSubmit(event) {
		event.preventDefault();
		const data = {
			date   : this.state.date,
			title  : this.state.title,
			amount : Number.parseInt(this.state.amount,0)
		}
		RecordsAPI.create(data).then(
			res => {
				this.props.handleNewRecord(res.data);
				this.setState({
					date   : "",
					title  : "",
					amount : ""
				})
			}
		).catch(
			error => console.log(error.message)
		)
	}

	render(){
		return (
			<form className="form-inline mb-3" onSubmit={this.handleSubmit.bind(this)}>
				<div className="from-group mr-1">
					<input 
						type="text" 
						className="form-control" 
						onChange={this.handleChange.bind(this)} 
						placeholder="Date" 
						name="date"
						autoComplete="off"
					/>
				</div>
				<div className="from-group mr-1">
					<input 
						type="text" 
						className="form-control" 
						onChange={this.handleChange.bind(this)} 
						placeholder="Title" 
						name="title"
						autoComplete="off"
					/>
				</div>
				<div className="from-group mr-1">
					<input 
						type="text" 
						className="form-control" 
						onChange={this.handleChange.bind(this)} 
						placeholder="Amount" 
						name="amount"
						autoComplete="off"
					/>
				</div>
				<button className="btn btn-primary" disabled={!this.valid()}>Create Record</button>
			</form>
		);
	}
}

